﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Autorent.Web._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="./img/favicon.ico" type="image/x-icon" rel="icon" />
    <link href="./styles/main-page-style.css" rel="stylesheet" type="text/css" />
    <link href="./styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
    <link href="./styles/menu-style.css" rel="stylesheet" type="text/css" />
    <link href="./styles/jWizard.base.css" rel="stylesheet" type="text/css" />
    <script src="./Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="./Scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
    <script src="./Scripts/jquery.spasticNav.js" type="text/javascript"></script>
    <script src="./Scripts/jquery.jWizard.min.js" type="text/javascript"></script>
    <script src="./Scripts/master-page.js" type="text/javascript"></script>
    <title>Car Rental</title>
    <script type="text/javascript">

        //------------startup logic----------------------------------------------//

        $(document).ready(function () {

            //apply menu lava-lamp plugin
            $("#nav").spasticNav();


            //process url hash on document load event
            var hash = window.location.hash.substr(1);
            var href = $('#nav li a').each(function () {
                var href = $(this).attr('href');
                if (hash == href.substr(0, href.length - 4)) {
                    var toLoad = hash + '.htm';

                    //load appropriate page for current  hash
                    $('.content').load(toLoad, function () {
                        switch (hash) {
                            case "reservation":
                                ReservationPage();
                                break;
                            case "checkout":
                                ChechOut();
                                break;
                            case "search":
                                SearchPage();
                                break;
                            default:
                                break;
                        }
                    });
                }
            });


            //handle menu item click
            $('#nav li a, #nav-bottom li a').click(function () {
                $('#load').fadeIn('fast');
                var toLoad = $(this).attr('href');
                //load content
                $('.content').load(toLoad);
                window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 4);
                $('#load').fadeOut('fast', function () {
                    switch (window.location.hash.substr(1)) {
                        case "reservation":
                            ReservationPage();
                            break;
                        case "checkout":
                            // apply script logic to checkout page
                            ChechOut();
                            break;
                        case "search":
                            SearchPage();
                            break;
                        default:
                            break;
                    }
                });
                return false;
            });
        });

        //-------------------------------------------------//
        //------------Search Page Scripts------------------//
        //-------------------------------------------------//



        function SearchPage() {

            //outline on hover car category
            $('.car-category').hover(function () {
                $(this).addClass('outlined');
            }, function () {
                $(this).removeClass('outlined');
            });

            //container for temporary html
            var content = "";
            //handle car category selection
            $('.car-category').click(function () {

                var category = $(this).find('img').attr('alt');
                var id = $('#select-region').val();
                $.ajax({
                    type: "GET",
                    url: "./handlers/GetCarsHandler.ashx",
                    data: { carCategory: category, regionId: id },
                    success: function (msg) {
                        content = $('#search').html();
                        $('#search').html(msg);
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            });

        }




        //-------------------------------------------------//
        //------------Search Page Scripts End--------------//
        //-------------------------------------------------//        



        //-----------------------------------------------//
        //-------------CheckOUT PAGE SCRIPTS-------------//
        //-----------------------------------------------//

        function ChechOut() {
            $('#btnCheckout').click(function () {
                if ($('#txtReservNo').val() == '' || $('#txtReserveEmail').val() == '' || !validateEmail($('#txtReserveEmail').val())) {
                    $('#checkout-error').css('visibility', 'visible');
                    if ($('#txtReservNo').val() == '') {
                        $('#reservNum .star').css('visibility', 'visible');
                        $('#checkout-error').text('Enter reservation number');
                    }
                    if ($('#txtReserveEmail').val() == '') {
                        $('#email .star').css('visibility', 'visible');
                        $('#checkout-error').text('Enter email');
                    }
                    if (!validateEmail($('#txtReserveEmail').val())) {
                        $('#email .star').css('visibility', 'visible');
                        $('#checkout-error').text('Enter correct email');
                    }
                }
                else {
                    $('#checkout-error').css('visibility', 'hidden').text('Enter valid info');
                    $('.star').css('visibility', 'hidden');
                    //send order request to the server
                    $.ajax({
                        type: "GET",
                        url: "./handlers/CheckStatus.ashx",
                        data: {
                            id: $('#txtReservNo').val(),
                            email: $('#txtReserveEmail').val()
                        },
                        success: function (msg) {
                            $('#checkout-start').hide();
                            $('#checkout-info').html(msg);
                            $('#checkout-title').text('Reservation details');
                            $('#checkout-info').css('height', '300').css('visibility', 'visible')
                            .append("<button id='btnCheckoutBack' type='button' style='width: 130px; height: 34px; margin: 15px;font-size: 1em; float: right;'>Back</button>");
                            $('#btnCheckoutBack').click(function () {
                                $('#checkout-info').css('visibility', 'hidden').css('height', '0')
                                $('#checkout-start').animate({
                                    height: 'toggle'
                                }, 500);
                                $('#checkout-title').text('Please, enter your reservation details');
                            });
                        },
                        error: function (msg) {
                            alert(msg);
                        }
                    });
                }
            });

        }



        //-----------------------------------------------//
        //-------------CheckOUT PAGE SCRIPTS-END---------//
        //-----------------------------------------------//


        //-----------------------------------------------//
        //-------------RESERVATION PAGE SCRIPTS----------//
        //-----------------------------------------------//

        //applies datepicker plugin
        function ReservationPage() {
            //toggle hidden steps of wizard after loading wizard plugin
            $('.hidden').removeClass('hidden');
            //bind car cell click event to select only one car at a time
            $('.carContainer').live('click', function () {
                $('.selected').removeClass('selected');
                $(this).addClass('selected');
            });
            Wizard();
            DatePicker();
        }

        function DatePicker() {
            //apply datepicker plugin
            $('#txtStartDate, #txtReturnDate').datepicker({
                minDate: +1,
                maxDate: +30,
                dateFormat: 'dd-mm-yy',
                constrainInput: true,
                onSelect: function (dateText, instr) {
                    compareDates($('#txtStartDate').datepicker('getDate'), $('#txtReturnDate').datepicker('getDate'));
                }
            });
        }


        //validate dates
        function compareDates(dateStart, dateEnd) {
            if (dateStart > dateEnd) {
                //if start date greater then end date set end date equals start date
                $('#txtReturnDate').datepicker('setDate', dateStart)
                alert('Pickup date should be less then return date');
                return false;
            }
        }

        //----------------------------------------//
        //applies wizard template
        function Wizard() {
            $w = $("#jWizard");
            $w.jWizard({
                effects: { enable: true },
                buttons: {
                    cancelType: "reset",    // Resets the form when the Cancel Button is clicked (use in conjunction with onCancel to jump to the first step)
                    finishType: "submit"    // Will POST the form when the Finish Button is clicked
                },

                // The 4 functions below are callbacks... they are the last function to be executed before deciding whether or not to proceed
                cancel: function (event, ui) {
                    $w.jWizard("firstStep");
                },
                previous: function (event, ui) {
                    // some code
                },
                next: function (event, ui) {
                    // some code
                },
                finish: function (event, ui) {
                    alert("Thank you!");
                }
            })

            //bind function for implementing ajax request for car uploading
    .bind("jwizardchangestep", function (event, ui) {
        // after the first step and before second we download list of cars in container div
        if (ui.currentStepIndex == 0 && ui.nextStepIndex == 1) {
            var carCategory = $('#ddlCars').val();
            var location = $('#ddlLocation').val();
            $.ajax({
                type: "GET",
                url: "./handlers/GetCarsHandler.ashx",
                data: { carCategory: carCategory, regionId: location },
                success: function (msg) {
                    $('#vehicleWrapper').html(msg);
                },
                error: function () {
                    $('#vehicleWrapper').html('<H3>Error occured while gettin vehicle list</H3>');
                }
            });
        }
    })
            //bind function for implementing order summary displaying
    .bind("jwizardchangestep", function (event, ui) {
        // after the second step and before third we make reservation summary div
        if (ui.currentStepIndex == 1 && ui.nextStepIndex == 2) {
            //clear target div
            $('#reservation-result').html('');
            //copy selected car to reservation summary div
            $('#reservation-result').prepend($('.selected').clone(true));
            $('#reservation-result .selected').removeClass('selected');
            //-----------copy information from registration step to order summary---------//
            $('#location').text($('#ddlLocation option:selected').text());
            $('#startDate').text($('#txtStartDate').val() + ', ' + $('#ddlStartHours option:selected').text() + $('#ddlStartMinutes option:selected').text());
            $('#returnDate').text($('#txtReturnDate').val() + ', ' + $('#ddlReturnHours option:selected').text() + $('#ddlReturnMinutes option:selected').text());
            $('#carType').text($('#ddlCars option:selected').text());
            $('#tariff').text($('#ddlTariff option:selected').text());
            $('#email').text($('#txtEmail').val());
        }
    })
            //handle summary step finish click
     .bind("jwizardchangestep", function (event, ui) {
         // after the summary step and before finish we send information on the server and receive reservation ticket
         if (ui.currentStepIndex == 2 && ui.nextStepIndex == 3) {
             //send info about order
             $.ajax({
                 type: "GET",
                 url: "./handlers/PlaceOrderHandler.ashx",
                 data: {
                     category: $('#ddlCars').val(),
                     location: $('#ddlLocation').val(),
                     dateStart: $('#txtStartDate').val(),
                     dateEnd: $('#txtReturnDate').val(),
                     tariff: $('#ddlTariff option:selected').val(),
                     email: $('#txtEmail').val(),
                     timeStart: $('#ddlStartHours option:selected').val() + ':' + $('#ddlStartMinutes option:selected').val(),
                     timeEnd: $('#ddlReturnHours option:selected').val() + ':' + $('#ddlReturnMinutes option:selected').val(),
                     carId: $('.selected').attr('id')
                 },
                 success: function (msg) {
                     $('#orderId').text(msg);
                 },
                 error: function (msg) {
                     alert(msg);
                 }
             });
         }
     })
            //bind validation function for each step of wizard
    .bind("jwizardchangestep", function (event, ui) {
        //apply validation logic on each step
        switch (ui.currentStepIndex) {
            case 0:
                if ($('#txtStartDate').val() == '' || $('#txtReturnDate').val() == '' || !validateEmail($('#txtEmail').val())) {
                    if ($('#txtStartDate').val() == '') {
                        $('#span-pickup-date').css('visibility', 'visible');
                        $('#step-0-error').css('visibility', 'visible').text('Please, select pickup date');
                    }
                    if ($('#txtReturnDate').val() == '') {
                        $('#span-return-date').css('visibility', 'visible');
                        $('#step-0-error').css('visibility', 'visible').text('Please, select return date');
                    }
                    if (!validateEmail($('#txtEmail').val())) {
                        $('#span-email').css('visibility', 'visible');
                        $('#step-0-error').css('visibility', 'visible').text('Please, enter valid email');
                    }
                    return false;
                }
                else {
                    $('#step-0-error').css('visibility', 'hidden').text('Please, fill in all fields');
                    $('.star').css('visibility', 'hidden');
                }
                break;
            case 1:
                if (!$('.selected').length && ui.nextStepIndex == 2) {
                    $('#step-1-error').css('visibility', 'visible');
                    alert('Please, choose a car');
                    return false;
                }
                else {
                    $('#step-1-error').css('visibility', 'hidden');
                }
                break;
            case 2:

                break;
            case 3:

                break;
        }
    });
        }

        //email adress validation function
        function validateEmail(text) {
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (reg.test(text) == false) {
                return false;
            }
            else {
                return true;
            }
        }

        //-----------------------------------------------//
        //---------RESERVATION PAGE SCRIPTS END----------//
        //-----------------------------------------------//
    </script>
</head>
<body>
    <div class="PageContainer bgImageCont">
        <form id="form1" runat="server">
        <!--top menu container, container for login functionality and some more features-->
        <div class="ContainerTopNav">
            <span id="load"></span>
            <h3>
                Auto-Rent ordering system
            </h3>
        </div>
        <!-- content of the page including main menu-->
        <div class="all-content">
            <!--main site menu-->
            <div class="main-menu">
                <ul id="nav">
                    <li id="selected"><a href="reservation.htm">Make a reservation</a></li>
                    <li><a href="checkout.htm">Checkout reservation</a></li>
                    <li><a href="search.htm">Search a car</a></li>
                    <li><a href="products.htm">Products & services</a></li>
                    <li><a href="about.htm">About us</a></li>
                </ul>
            </div>
            <!--container for dynamic site content-->
            <div class="content">
            </div>
        </div>
        <!--footer container-->
        <div class="footer horizontal-lines">
            <div style="margin: 0 auto; width: 65%; text-align: center;">
                <ul id="nav-bottom">
                    <li><a href="reservation.htm">Make a reservation</a></li>
                    <li><a href="checkout.htm">Checkout reservation</a></li>
                    <li><a href="search.htm">Search a car</a></li>
                    <li><a href="products.htm">Products & services</a></li>
                    <li><a href="about.htm">About us</a></li>
                </ul>
            </div>
            <hr class="fuzzy" style="margin: 0 auto; width: 70%; clear: both;" />
            <div style="position: absolute; bottom: 0; text-align: center; width: 100%;">
                <p style="text-align: center">
                    <span style="font-family: Arial; color: black; font-size: 7pt"><span style="font-family: Arial,Helvetica;
                        font-size: xx-small">&copy; 2011 </span>Max - Serega - Pashok Corporation - All
                        Rights Reserved.</span>
                </p>
            </div>
        </div>
    </div>
    </form> </div>
</body>
</html>
